<template>
  <dv-loading v-if="isLoading">Loading...</dv-loading>
  <div v-else class="realtime-detail">
    <div class="left-container">
      <el-empty style="height: 450px" v-if="mediaList.length === 0" description="无数据"></el-empty>
      <el-carousel
        v-else
        trigger="click"
        :autoplay="false"
        height="450px"
        indicator-position="none"
      >
        <el-carousel-item v-for="item in mediaList" :key="item">
          <el-image
            v-if="item.indexOf('.mp4') === -1"
            :src="item"
            fit="fill"
            style="height: 450px"
          ></el-image>
          <video
            style="height: 100%; width: 100%"
            v-else
            :src="item"
            muted
            autoplay
            controls
          ></video>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right-container">
      <div class="current-info">
        <div class="realtime-data">
          <el-descriptions :column="1">
            <span slot="title" style="color: #fff">当前信息</span>
            <el-descriptions-item label="总质量">{{ message.totalWeight }}</el-descriptions-item>
            <el-descriptions-item label="总质量限值">{{ message.stdWeight }}</el-descriptions-item>
            <el-descriptions-item label="超限重">{{ message.overWeight }}</el-descriptions-item>
            <el-descriptions-item label="总轴数">{{ message.axleNum }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <over-per-chart
          class="chart"
          :percent-num="(message.overRate * 100).toFixed(0)"
          ref="chartRef"
        ></over-per-chart>
      </div>
      <el-divider></el-divider>
      <div class="info">
        <el-descriptions :column="2">
          <span slot="title" style="color: #fff">基础信息</span>
          <el-descriptions-item label="检测站点">{{ message.siteName }}</el-descriptions-item>
          <el-descriptions-item label="车辆牌号">{{ message.carNum }}</el-descriptions-item>
          <el-descriptions-item label="车牌颜色">{{ message.color }}</el-descriptions-item>
          <el-descriptions-item label="企业名称">{{ message.companyName }}</el-descriptions-item>
          <el-descriptions-item label="检测时间">{{ message.createTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-link type="primary" @click="junkToDataSearchDetail">详情</el-link>
    </div>
  </div>
</template>

<script>
import { getRealtimeDetailsById } from '@/service/bashboard/bashboard'
import { compact } from 'lodash'
import OverPerChart from '@/views/bashboard/components/OverPerChart'

export default {
  name: 'RealtimeDetail',
  components: {
    OverPerChart
  },
  props: {
    realtimeId: {
      type: [Number, String, Object],
      require: true
    }
  },
  data() {
    return {
      mediaList: [],
      message: {},
      isLoading: true
    }
  },
  created() {
    this.getDataById()
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    async getDataById() {
      const { data } = await getRealtimeDetailsById({
        id: this.realtimeId
      })
      // console.log('datadetail', data)
      this.isLoading = false
      if (data.code !== 0) return
      this.mediaList = compact(data.data.mediaUrl.map((item) => item.pictureUrl))
      this.message = data.data.entity
      this.$nextTick(() => {
        this.$refs.chartRef.initChart()
      })
    },
    junkToDataSearchDetail() {
      console.log(this.message)
      console.log(this.realtimeId)
      this.$bus.$emit('dataSearchJunkToDetail', {
        id: this.message.id,
        carNumber: this.message.carNum
      })
    }
  }
}
</script>

<style lang="less" scoped>
.realtime-detail {
  display: flex;

  .left-container {
    height: 100%;
    width: 60%;
    background-color: #fff;
  }

  .right-container {
    width: 40%;
    padding: 0 15px;

    .current-info {
      display: flex;

      .realtime-data {
        width: 60%;
      }

      .chart {
        width: 40%;
      }
    }
  }
}

.el-image {
  height: 100%;
  width: 100%;
}

.el-carousel {
}

video {
  object-fit: fill;
  height: 100%;
  width: 100%;
}

::v-deep .el-descriptions__body {
  background-color: unset;
  color: #ffffff;
}
.dv-loading {
  height: 450px;
}
</style>
